<template>
	<view class="warp">
    <view class="mpWxCustomHeader" :style="{'height':mpWxPosition.headerHeight+'px'}">
      <view class="mpWxCustomHeaderLogo" :style="{'padding': mpWxPosition.top+'px '+mpWxPosition.bothSideMargin+'px 0', 'height':mpWxPosition.height+'px'}">
        <image :style="{'margin-top':mpWxPosition.logoTop+'px', 'height':mpWxPosition.logoHeight+'px', 'width':mpWxPosition.logoWidth+'px'}" mode="aspectFit" :src="mpWxPosition.logoUrl"></image>
      </view>
    </view>
    <view class="container" :style="{'margin':'0 '+mpWxPosition.bothSideMargin+'px'}">
      <view class="swiper">
        <uv-swiper
            :list="swiper.list"
            keyName="url"
            :showTitle="false"
            :radius="10"
            circular></uv-swiper>
      </view>
      <view class="goods">
        <view class="search">
          <uv-search shape="square" @custom="search"></uv-search>
        </view>
        <view class="category">
          <scroll-view scroll-x="false" class="scroll">
            <view class="cate-items">
              <span :class="{'cate': true, 'active': item.isActive}" v-for="(item, index) in category.list" :key="index" @tap="searchCate(index)">{{ item.name }}</span>
            </view>
          </scroll-view>
        </view>
        <view class="goods-list" scroll-y="true" @scrolltolower="getProductList">
          <view class="goods-item" v-for="(item, index) in goods.list" :key="index" @tap="toProductDetail(item.id)">
            <image :src="item.cover" mode="aspectFit"></image>
            <view class="info">
              <view class="goods-name truncate-2-lines">{{ item.name }}</view>
              <view class="goods-specs truncate-1-lines">规格：{{ item.specs }}</view>
              <view class="goods-specs truncate-1-lines">型号：{{ item.model_num }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useMpWxPosition } from '@/stores/mpWxPosition'
import { useCategory } from '@/stores/category'
import { useBanner } from '@/stores/banner'
import { useMpUser } from '@/stores/mpUser'
let _this;
export default {
  name: 'Site_Index',
  beforeCreate() {
    _this = this;
  },
  data() {
    return {
      mpWxPosition: useMpWxPosition().getMpWxPosition,
      swiper: {
        list: []
      },
      category: {
        list: [
          {id: -10, name: '全部', isActive: true}
        ]
      },
      goods: {}
    }
  },
  onLoad() {
    _this.$api.mpLogin().then(() => {
      _this.setCategoryList()
      _this.category.list.forEach(function (item, index) {
        item.isActive = 0 === index;
      })
      _this.setBannerList()
      _this.initGoods()
      _this.getProductList()
    })
  },
  onReachBottom() {
    this.getProductList();
  },
  onShareAppMessage() {
    // 可以根据需要修改分享的标题和路径
    return _this.getShareObj()
  },
  onShareTimeline() {
    // 触发转发微信群/朋友圈任务
    return _this.getShareObj()
  },
  methods: {
    search(str) {
      _this.goods.searchStr = str
      _this.initGoods()
      _this.getProductList()
    },
    searchCate(i) {
      _this.category.list.forEach(function (item, index) {
        item.isActive = i === index;
        if (item.isActive) {
          _this.initGoods()
          _this.goods.selCate = item.id
          _this.getProductList()
        }
      })
    },
    setCategoryList() {
       useCategory().getCategory.list.forEach(function (item, index) {
         let catItem = {
           id: item.id,
           name: item.name,
           isActive: false
         }
         _this.category.list.push(item)
       })
    },
    setBannerList() {
      useBanner().getBanner.list.forEach(function (item, index) {
        let swiperItem = {
          id: item.id,
          url: item.url,
          name: item.name
        }
        _this.swiper.list.push(item)
      })
    },
    initGoods() {
      _this.goods = {
        list: [],
        page: 0,
        pageSize: 10,
        pageTotal: 1,
        selCate: _this.goods.selCate || -10,
        searchStr: _this.goods.searchStr || ''
      }
    },
    getProductList() {
      _this.goods.page ++;
      if (_this.goods.page > _this.goods.pageTotal) {
        return;
      }
      let postData = {
        page: _this.goods.page,
        pageSize: _this.goods.pageSize,
        selCate: _this.goods.selCate,
        searchStr: _this.goods.searchStr
      }
      _this.$api.post('/product/default/list', postData).then(res => {
        _this.goods.pageTotal = res.data._meta.pageCount;
        res.data.items.forEach(function (item, index) {
          _this.goods.list.push(item)
        })
      })
    },
    toProductDetail(id) {
      uni.navigateTo({
        url: '/pages/product/detail?id=' + id
      })
    },
    getShareObj() {
      const title = '首页分享';
      const shareParams = {
        mpUserId: useMpUser().getMpUser.id
      }
      let query = _this.$tool.objectToQueryString(shareParams);
      const path = `/pages/site/index?${query}`;
      const imageUrl = _this.swiper.list[0].url || '';
      return {
        title: title,
        path: path,
        imageUrl: imageUrl
      };
    }
  }
}
</script>

<style scoped lang="scss">
@mixin noScrollX() {
  width: 0;
  height: 0;
  display: none;
}
.truncate-1-lines { // css3 最多两行文字，超出的文字用省略号
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1; /* 行高，根据实际需要调整 */
  max-height: 1em;
}
.truncate-2-lines { // css3 最多两行文字，超出的文字用省略号
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5; /* 行高，根据实际需要调整 */
  max-height: 3em; /* 两行文本的最大高度，根据行高计算 */
}
.warp {
  .mpWxCustomHeader { // 微信小程序自定义导航栏
    //display: flex;
    position: sticky;
    top: 0;
    background-color: #007AFF;
    z-index: 100;
    .mpWxCustomHeaderLogo {
      image {
        display: inline-block;
      }
    }
  }
  .swiper {
    margin-top: 10px;
  }
  .goods {
    margin-top: 10px;
    padding-top: 10px;
    border-radius: 10px;
    background: #FBFBFB;
    .category {
      margin-top: 10px;
      .scroll {
        display: inline-block;
        white-space: nowrap;
        &::-webkit-scrollbar {
          @include noScrollX();
        }
        margin: 4px 0 4px 0;
        .cate-items {
          &::-webkit-scrollbar {
            @include noScrollX();
          }
          display: flex;
          .cate {
            padding: 4px 10px 4px 10px;
            font-size: 14px;
            border-radius: 3px;
          }
          .active {
            background: #00B7FF;
            color: #FFFFFF;
          }
        }
      }
    }
    .goods-list {
      margin-top: 5px;
      display: flex; /* 设置为Flex容器 */
      flex-wrap: wrap; /* 允许子元素换行 */
      justify-content: space-between; /* 水平间距均匀分布 */
      .goods-item {
        //display: block;
        //flex-basis: 49%; /* 基础宽度为父容器的48% */
        width: 350rpx;
        margin-bottom: 10px; /* 底部外边距 */
        background-color: #FFFFFF; /* 背景颜色 */
        border-radius: 8px; /* 圆角 */
        overflow: hidden; /* 隐藏溢出内容 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        image {
          width: 350rpx;
          height: 350rpx;
        }
        .goods-name {
          padding: 0 5px;
          font-weight: bold;
          font-size: smaller;
          height: 3rem;
          color: grey;
        }
        .goods-specs {
          padding: 0 5px;
          font-weight: bold;
          font-size: smaller;
          height: 3rem;
          color: grey;
        }
      }
    }
  }
}
</style>
